<template>
  <view class="resume-page">
    <!-- 顶部导航 -->
    <view class="header">
      <image 
        class="back-icon" 
        src="/static/icons/left.png" 
        mode="widthFix"
        @click="navigateBack"
      ></image>
      <text class="page-title">我的简历</text>
    </view>

    <!-- 已上传简历列表 -->
    <view 
      class="resume-item" 
      v-for="(item, index) in resumeList" 
      :key="item.resumeId"
    >
      <view class="resume-info">
        <image 
          class="file-avatar" 
          src="/static/avatar/pdf.png"  
          mode="aspectFill"
        ></image>
        <view class="file-detail">
          <text class="file-name">{{ item.name }}</text>
          <text class="update-time">上传时间：{{ formatDate(new Date(item.uploadTime)) }}</text>
          <!-- 上传失败提示 -->
          <text class="upload-error" v-if="item.uploadError">{{ item.uploadError }}</text>
        </view>
      </view>
      <!-- 删除按钮 -->
      <view class="delete-btn" @click="deleteResume(index, item.resumeId)">
        <image 
          class="delete-icon" 
          src="/static/icons/delete.png" 
          mode="widthFix"
        ></image>
      </view>
    </view>

    <!-- 空列表提示 -->
    <view class="empty-tip" v-if="resumeList.length === 0">
      <text>暂无上传的简历</text>
    </view>

    <!-- 最多支持提示 -->
    <text class="max-tip">最多支持暂存上传3份附件简历</text>

    <!-- 上传简历按钮 -->
    <button class="upload-btn" @click="chooseAndUploadResume">
      上传简历
    </button>
  </view>
</template>

<script>
	import state from '../../store/state';
	import {selectResume,deleteResume} from '@/api/resume.js'
export default {
  data() {
    return {
		resumeId: '',
		userId: '',
      resumeList: [], // 存储真实上传的简历列表
      isUploading: false ,// 防止重复上传
	  retryCount:0,
    };
  },
  onLoad() {
	  this.loadUserInfo();
    // 页面加载时从后端获取已上传的简历列表
    
  },
  methods: {
	  // 2. 加载用户信息（打开页面时获取）
	  loadUserInfo() {
	    // 限制最大重试次数为3次
	    if (this.retryCount >= 3) {
	      uni.showToast({ title: '获取用户信息失败，请重新登录', icon: 'none' });
	      // 可以在这里跳转登录页
	      // uni.navigateTo({ url: '/pages/login/login' });
	      return;
	    }
	  
	    if (!state.userInfo) {
	      console.log(`第${this.retryCount + 1}次尝试获取用户信息...`);
	      setTimeout(() => {
			  this.retryCount++;
	        // 递归调用时重试次数+1
	        this.loadUserInfo();
	      }, 2000);
	    } else {
	      console.log('获取用户信息成功', state.userInfo);
	      this.userId = state.userInfo.userId;
		  console.log('获取用户信息成功', this.userId);
	      this.getResumeList();
	    }
	  },
    // 导航返回
    navigateBack() {
      uni.navigateBack();
    },

    // 获取已上传的简历列表（从后端接口拉取）
    getResumeList() {		
		selectResume({userId: this.userId}).then(res=>{
			console.log(res.data)
			if (res.code === 200) {
			  this.resumeList = res.data; // 格式：[{fileId, name, updateTime}, ...]
			  
			  // 关键：将含 fileUrl 的简历列表存入全局状态
			   state.resumeListWithFileUrl = this.resumeList; 
					
			  // 2. 遍历列表，从 fileUrl 中提取文件名并赋值给 name
			        this.resumeList.forEach(item => {
			          // 处理 fileUrl 为空的情况
			          if (!item.fileUrl) {
			            item.name = '未知文件';
			            return;
			          }			          
			          // 从 fileUrl 中截取文件名（例如："/PDF/abc.pdf" → "abc.pdf"）
			          // 分割路径，取最后一段作为文件名
			          const fileName = item.fileUrl.split('/').pop(); 
			          // 如果文件名包含特殊符号（如参数），进一步处理（可选）
			          item.name = fileName || '未知文件';
			  
			          // 3. 处理 resumeId 为 null 的情况（避免列表 key 异常）
			          if (!item.resumeId) {
			            item.resumeId = 'temp_' + Date.now() + Math.random().toString(36).substr(2, 5);
			          }
			        });
			} 
		})
    },

    // 2. 选择并上传简历
    chooseAndUploadResume() {
      if (this.resumeList.length >= 3) {
        uni.showToast({ title: '最多支持上传3份简历', icon: 'none' });
        return;
      }
      if (this.isUploading) {
        uni.showToast({ title: '正在上传中，请稍候', icon: 'none' });
        return;
      }

      // 选择文件（只允许PDF）
      uni.chooseFile({
        count: 1,
        type: 'file',
        extension: ['pdf'], // 限制只选PDF
        success: (chooseRes) => {
          const tempFile = chooseRes.tempFiles[0];
          // 校验文件大小（限制不超过10MB）
          if (tempFile.size > 10 * 1024 * 1024) {
            uni.showToast({ title: '文件大小不能超过10MB', icon: 'none' });
            return;
          }
          // 校验文件后缀（二次确认，防止绕过选择器）
          if (!tempFile.name.toLowerCase().endsWith('.pdf')) {
            uni.showToast({ title: '请上传PDF格式文件', icon: 'none' });
            return;
          }
          this.uploadFileToServer(tempFile); // 调用上传接口
        },
        fail: (err) => {
          console.error('文件选择失败：', err);
          uni.showToast({ title: '文件选择失败', icon: 'none' });
        }
      });
    },

    // 3. 上传文件到服务器
    uploadFileToServer(tempFile) {
      this.isUploading = true;
      // 显示上传中提示
      uni.showLoading({ title: '上传中...' });

      // 调用uni-app的上传API
      uni.uploadFile({
        url: '/api/user-module/uploadFile/addResume', // 后端上传接口地址
        filePath: tempFile.path, // 本地临时文件路径
        name: 'fileUrl', // 后端接收文件的参数名（需与后端一致）
        formData: { 
          // 额外参数：用户ID（实际项目需从登录信息中获取）
          userId :state.userInfo.userId
        },
        // 上传进度回调
        onProgressUpdate: (progress) => {
          console.log('上传进度：' + progress.progress + '%');
          // 可添加进度条显示逻辑（如在列表中临时显示进度）
        },
        success: (uploadRes) => {
          // 解析后端返回的JSON
          const res = JSON.parse(uploadRes.data);
          if (res.code === 200) {
			  console.log(res)
            // 上传成功，添加到列表
            this.resumeList.push({
              resumeId: res.data.resumeId, // 后端返回的唯一文件ID
              name: tempFile.name,
              updateTime: this.formatDate(new Date()) // 格式化当前时间
            });
			// 关键：同步更新全局state的简历列表
			    state.resumeListWithFileUrl = this.resumeList;
            uni.showToast({ title: '上传成功', icon: 'success' });
          } else {
            // 上传失败
            this.resumeList.push({
              fileId: 'error_' + Date.now(),
              name: tempFile.name,
              updateTime: this.formatDate(new Date()),
              uploadError: res.msg || '上传失败'
            });
            uni.showToast({ title: res.msg || '上传失败', icon: 'none' });
          }
        },
        
        complete: () => {
          this.isUploading = false;
          uni.hideLoading(); // 关闭加载提示
        }
      });
    },

    // 4. 删除简历（调用后端删除接口）
    deleteResume(index, resumeId) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这份简历吗？删除后不可恢复',
        success: (modalRes) => {
          // 用户确认删除
          if (modalRes.confirm) {
            // 调用删除接口，传递当前简历的 resumeId
            deleteResume({ resumeId: resumeId }) // 修正：使用参数 resumeId 而非 this.resumeId
              .then(res => {
                // 注意：后端响应通常嵌套在 res.data 中，需根据实际接口调整
                if (res.code === 200) { // 使用可选链避免 res.data 为 null 报错
                  this.resumeList.splice(index, 1); // 从列表中移除该简历
                  uni.showToast({ title: '删除成功', icon: 'success' });
                } else {
                  uni.showToast({ title: res.msg || '删除失败', icon: 'none' });
                }
              })
              .catch(e => {
                console.error('删除接口调用失败：', e);
                uni.showToast({ title: '网络错误，删除失败', icon: 'none' }); // 修正提示文案
              });
          }
        }
      });
    },
    // 辅助方法：格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      return `${year}.${month}.${day} ${hour}:${minute}`;
    }
  }
};
</script>

<style scoped>
/* 页面基础样式 */
.resume-page {
  background-color: #FFFFFF; 
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
  color: #000000; 
}

/* 顶部导航 */
.header {
  display: flex;
  align-items: center;
  width: 100%; 
  padding: 10rpx 0;
  margin-bottom: 30rpx;
  border-bottom: 1px solid #E5E5E5; 
}
.back-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  flex: 1; 
  text-align: center; 
}

/* 简历列表项 */
.resume-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20rpx;
  border: 1px solid #E5E5E5;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}
.resume-info {
  display: flex;
  align-items: flex-start;
}
.file-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 15rpx;
}
.file-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.file-name {
  font-size: 30rpx;
  margin-bottom: 8rpx;
  font-weight: bold;
  max-width: 400rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.update-time {
  font-size: 24rpx;
  color: #999999; 
}
.upload-error {
  font-size: 24rpx;
  color: #FF3B30; /* 错误红色 */
  margin-top: 5rpx;
}

/* 空列表提示 */
.empty-tip {
  text-align: center;
  padding: 100rpx 0;
  color: #999999;
  font-size: 28rpx;
}

/* 删除按钮 */
.delete-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.delete-icon {
  width: 30rpx;
  height: 30rpx;
}

/* 最多支持提示 */
.max-tip {
  font-size: 24rpx;
  color: #999999;
  margin: 30rpx 0;
  display: block;
}

/* 上传按钮 */
.upload-btn {
  background: linear-gradient(90deg, #4CAFFF, #007AFF); 
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx;
  border-radius: 30rpx;
  text-align: center;
  width: 100%;
  border: none;
  margin-top: 20rpx;
}
.upload-btn::after {
  border: none; /* 去除uni-app按钮默认边框 */
}
</style>